<div
  class="panel-app"
  style="
min-height:375px;    
display: flex;
justify-content: space-between;
flex-direction: column;"
>
  <table
    class="eh-table"
    mat-table
    [dataSource]="dataSource"
    multiTemplateDataRows
    matSort
  >
    <ng-container
      matColumnDef="{{ column }}"
      *ngFor="let column of displayedColumns"
    >
      <ng-container *ngIf="column !== 'action' && column !== 'status'">
        <th
          mat-header-cell
          *matHeaderCellDef
          [ngStyle]="{ width: '140px' }"
          l10nTranslate
        >
          {{ column }}
        </th>
      </ng-container>
      <ng-container *ngIf="column === 'action'">
        <th mat-header-cell *matHeaderCellDef l10nTranslate>{{ column }}</th>
      </ng-container>
      <ng-container *ngIf="column === 'status'">
        <th mat-header-cell *matHeaderCellDef l10nTranslate>{{ column }}</th>
      </ng-container>
      <ng-container *ngIf="column !== 'action' && column !== 'status'">
        <td mat-cell *matCellDef="let item" [ngStyle]="{ width: '140px' }">
          {{
            column === "time"
              ? (item.time
                | timeAgo: { ago: item.ago, now: item.now, locale: locale })
              : item[column]
          }}
        </td>
      </ng-container>
      <ng-container *ngIf="column === 'action'">
        <td mat-cell *matCellDef="let item">
          <a>{{ "assets.detail" | translate: lang }}</a>
        </td>
      </ng-container>

      <ng-container *ngIf="column === 'status'">
        <td mat-cell *matCellDef="let item" l10nTranslate>
          {{ item.status | status2text: "depositStatus" }}
        </td>
      </ng-container>
    </ng-container>

    <ng-container matColumnDef="assetsItem">
      <td
        style="border-bottom:0"
        mat-cell
        *matCellDef="let item"
        [attr.colspan]="displayedColumns.length"
      >
        <div
          style="overflow:hidden"
          [@detailExpand]="item == assetsItem ? 'expanded' : 'collapsed'"
        >
          <div class="panel-item">
            <div class="i df">
              <div class="l">{{ "assets.time" | translate: lang }}</div>
              <div class="r">
                {{ item.ago * 1000 | l10nDate: defaultLocale:"fullDate" }}
              </div>
            </div>
            <div class="i df">
              <div class="l">{{ "assets.address" | translate: lang }}</div>
              <div class="r">{{ item.address }}</div>
            </div>
            <div class="i df">
              <div class="l">{{ "assets.amount" | translate: lang }}</div>
              <div class="r">{{ item.amount }}</div>
            </div>
            <div class="i df">
              <div class="l">TxID:</div>
              <div class="r">{{ item.txid }}</div>
            </div>
          </div>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let item; columns: displayedColumns"
      (click)="assetsItem = assetsItem === item ? null : item"
    ></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: ['assetsItem']"
      style="height:0"
    ></tr>
  </table>

  <mat-paginator
    [pageSizeOptions]="[5, 10, 20]"
    showFirstLastButtons
  ></mat-paginator>
</div>
